<template>
	<view class="content">
		<view style="height: 1rpx; width: 100%;"></view>
  <!-- 搜索顶部tabs -->
  <view class="tabsr">
  	<view class="search">
  		<u-search :showAction="true" actionText="搜索" :placeholder="placeholder" v-model="keyword" @custom='custom' @change="changeSearch" @search="custom"></u-search>
  	</view>
  </view>
  <!-- 搜索顶部tabs -->
	<!-- 列表数据 -->
	<view style="margin-top: 150rpx;">
		
		<view v-if="listData!=null">
			<view class="order_li">
				<view class="li_top le">
					<view class="top_left">
						<view class="bh">
							<view>订单号:</view>
							<view class="in">
								<text>{{listData.order_id}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 内容 -->
				<view class="li_contes">
					<view class="li_title">{{listData.store_name}}</view>
					<view class="li_span">{{listData.address}}</view>
				</view>
				<!-- 内容 end-->
				
				<!-- 商品列表 -->
				<view>
						<view class="li_good" v-for="(it,id) in listData.goods" :key="id">
							<view class="top_titles">
								<view class="top_left">
									<text>{{it.goods_name}}</text>
								</view>
								<view class="top_right">
									<view class="on">规格:{{it.goods_weight}}{{it.goods_unit}}/{{it.true_weight}}{{it.goods_unit}}</view>
									<view class="nn" v-if="it.has_storage">(已发)</view>
									<view class="nn" v-else>(无货)</view>
								</view>
							</view>
						</view>
				</view>
				<!-- 商品列表 end-->
				
				<!-- 配送信息 -->
				<view class="henx"></view>
				<view class="delivery" v-if="listData.logistic">
					<view class="delivery_title" v-if="listData.logistic.staff">配送员:{{listData.logistic.staff}}</view>
					<view class="delivery_title" v-if="listData.logistic.shipping_date">发货时间:{{listData.logistic.shipping_date}}</view>
					<view class="delivery_title">配送状态:{{listData.logistic.status}}</view>
				
					<!-- 送货图片 -->
					<view  v-if="listData.logistic.status=='已送达'">
						<view class="phones_top">
							<view class="phones_title">送货图片展示</view>
							<view class="phones_time">送达时间:{{listData.logistic.end_time}}</view>
						</view>
						<view class="phones">
							<view class="phones_li" v-for="(it,ind) in listData.logistic.images" :key="ind">
								<view class="li_img" @click="previewImageClicks(ind,listData.logistic.images)">
									<u-image :src="it" :width="'154rpx'" height="154rpx" mode="scaleToFill" :lazy-load="true" :radius="6">
										<template v-slot:loading>
												<u-loading-icon color="red"></u-loading-icon>
											</template>
									</u-image>
								</view>
							</view>
						</view>
					</view>	
					<!-- 送货图片 -->
					
				</view>
				<view class="delivery_one" v-else>暂无配送信息！</view>
				<!-- 配送信息 end-->
				
			</view>
		</view>
		
		<!-- 没数据 -->
		<view v-else style="padding: 20rpx 0;">
			<nullstate></nullstate>
		</view>
	</view>
  <!-- 列表数据 end-->
	
	<!--加载框 start-->
	<loading :visible="loadingTrue" :show="false"></loading>
	<!--加载框 end-->
	
  <view style="height: 1rpx; width: 100%;"></view>
		
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	//请求接口
	import {
		postOrderList
	} from "@/service/pagesA/search.js"
	
	
	//默认初始值
	const listData=ref(null);
	const loadingTrue=ref(false);
	const keyword=ref('');
	const searchWord=ref('');
	const placeholder=ref('可使用订单编号查询');
	
	//搜索
	async function postOrderListFun(){
		await postOrderList({
			order_id:searchWord.value
		})
		.then((res)=>{
			listData.value=res;
			console.log(res,'ss')
		})
		.finally(()=>{
			loadingTrue.value=false;
		})
	}
	
	//点击搜索按钮确定
	function custom(e) {
		searchWord.value=e;
		initialization();
		loadingTrue.value=true;
		postOrderListFun();
		
	}
	
	//发生变化
	function changeSearch(e) {
		if(e==''){
			searchWord.value=e;
			initialization();
		}
	}
	
	//初始化默认
	function initialization(){
		listData.value=null;
	}
	
	//预览图片
	function previewImageClicks(current,img){
		uni.previewImage({
			current:current,
			urls: img
		})
	}
	
</script>

<style lang="scss" scoped>
page,.content{
	background: #F5F5F5;
	// background: #fff;
	
	//#ifdef H5
	min-height: calc((100vh - 94px));
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	min-height: 100vh;
	// #endif 
}

.tabsr{
	position: fixed;
	//#ifdef H5 
	top: 44px;
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	top: 0px;
	// #endif 	
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 0 16rpx 0 rgba(0,0,0,0.05);
	z-index: 99;
	.search{
		padding: 30rpx;
		background: #fff;
	}
}

.order_li{
	padding: 20rpx;
	margin: 0 20rpx;
	margin-bottom: 20rpx;
	background: #fff;
	border-radius: 14rpx;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.li_top{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	line-height: 60rpx;
	// border-bottom: 2rpx solid #F7F7F7;
	// padding-bottom: 10rpx;
	// margin-bottom: 20rpx;
	
	// align-items: center;
	position: relative;
	.top_left{
		font-size:26rpx;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: auto;
		.bh{
			font-size:28rpx;
			font-weight: 500;
			display: flex;
			flex-direction: row;
			.in{
				font-size:30rpx;
				font-weight: 700;
				color: red;
			}
		}
	}
	.top_right{
		font-size: 30rpx;
		color: #FD7722;
		display: flex;
		flex: none;
		margin-left: 14rpx;
		
	}
}

.li_contes{
	margin-bottom: 20rpx;
	.li_title{
		font-size: 30rpx;
		color: #333;
		font-weight: 700;
	}
	.li_span{
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
	}
}


.li_top.le::after {
	content: '';
	display: block;
	width: 8rpx;
	height: 40rpx;
	background-color: #FF3D5A;
	border-radius: 8rpx;
	position: absolute;
	top: 10rpx;
	left: -20rpx;
}

.li_good{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 40rpx;
	// align-items: center;
	position: relative;
	margin-bottom: 10rpx;
	.top_titles{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: auto;
		.top_left{
			display: flex;
			flex-direction: row;
			align-items: center;
			flex: auto;
			color: red;
			font-size: 28rpx;
			font-weight: 700;
		}
		.top_right{
			font-size: 30rpx;
			color: #FD7722;
			display: flex;
			flex: none;
			margin-left: 30rpx;
			.on{
				font-size: 26rpx;
				color: red;
				// width: 120rpx;
				width: auto;
				font-weight: 700;
			}
			.nn{
				font-size: 26rpx;
				color: #FD7722;
				// width: 120rpx;
				width: auto;
				font-weight: 700;
			}
		}
	}
}

.henx{
	border-bottom: 2rpx solid #F7F7F7;
	padding: 10rpx 0;
}

.delivery{
	padding: 20rpx 0;
	.delivery_title{
		font-size: 28rpx;
		color: #000;
		margin-bottom: 10rpx;
		font-weight: 700;
	}
}

.delivery_one{
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #000;
}

.phones_top{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-top: 2rpx solid #F7F7F7;
	.phones_time{
		font-size: 28rpx;
		color: red;
	}
	.phones_title{
		padding: 20rpx 0;
		color: #333;
		font-size: 30rpx;
		font-weight: 700;
	}
}

.phones{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	.phones_li{
		flex-wrap: wrap;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		position: relative;
		.li_img{
			width: 154rpx;
			height: 154rpx;
			border-radius: 12rpx;
			background: #F4F5F7;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: 0.3s all;
			position: relative;
			z-index: 1;
			.iconfont{
				color: #ccc;
				font-size: 44rpx;
			}
		}
		.li_img:active{
			background: #eee;
		}
	}
	.phones_li:nth-child(4n){
		margin-right: 0;
	}
}
</style>
